<template>
  <div class="box">
    <div class="divForm">
      <el-form ref="form" label-position="left">
        <el-row>
          <el-col :span="8">
            <el-form-item label="车辆类型:">
              <el-select v-model="form.truckTypeId" size="mini" class="inputW" placeholder="请选择">
                <el-option
                  v-for="item in carType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="车牌号码:">
              <el-input v-model="form.licensePlate" size="mini" class="inputW" />
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item :span="8">
              <el-button type="primary" @click="getQueryList">搜索</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>
    <div class="divTabs">
      <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">全部</el-menu-item>
        <el-menu-item index="2">可用</el-menu-item>
        <el-menu-item index="3">停用</el-menu-item>
      </el-menu>
    </div>
    <div class="divTable">
      <el-button type="primary" style="margin-bottom: 20px;" @click="showDialog = true">新增车辆</el-button>
      <el-table :header-cell-style="{background: '#f4f6f8'}" :data="list">
        <el-table-column

          prop="staffPhoto"
          align="center"
          label="序号"
          type="index"
          :index="indexMethod"
        />
        <el-table-column prop="licensePlate" label="车牌号码" />
        <el-table-column prop="truckTypeName" label="车辆类型" />
        <el-table-column prop="driverNum" label="司机数量" />
        <el-table-column prop="status" label="车辆状态">
          <template v-slot="{ row }">
            <span size="mini">{{ row.workStatus===1?'可用':'停用' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deviceGpsId" label="GPS设备ID" />
        <el-table-column prop="allowableLoad" label="实载重量(T)" />
        <el-table-column prop="allowableVolume" label="实载体积(米)" />
        <!-- 操作 -->
        <el-table-column label="操作" width="180px">
          <template v-slot="{ row }">
            <el-button size="mini" type="text" @click="to(row.id)">查看详情 </el-button>
            <el-button size="mini" :style="row.workStatus===1?'color: red;':''" type="text" @click="operate(row)">{{ row.workStatus===1?'禁用':'启用' }}</el-button>
            <el-button size="mini" type="text" @click="showDriver(row.id)">配置司机</el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="height: 60px" align="middle" type="flex" justify="end">
        <el-pagination
          :current-page="queryParams.page"
          :page-sizes="[5,10, 20, 30]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <!-- @size-change="handleSizeChange"
          @current-change="handleCurrentChange" -->
      </el-row>
    </div>
    <Disable :operate-id="operateId" :no-show.sync="noShow" />
    <Enable :operate-id="operateId" :is-show.sync="isShow" />
    <CarConfig v-if="driver" :truck-id="truckId" :driver.sync="driver" />
    <AddCarList v-if="showDialog" :car-type="carType" :show-dialog.sync="showDialog" @updateCarType="getPapeList" />
  </div>

</template>

<script>
import { getPagecarList } from '../api/carList'
import AddCarList from './components/add-carList.vue'
import CarConfig from './components/car-config.vue'
import Disable from './components/Disable.vue'
import Enable from './components/Enable.vue'
// import lodash from 'lodash'

export default {
  components: {
    AddCarList,
    CarConfig,
    Disable,
    Enable
  },
  data() {
    return {
      operateId: null,
      isShow: false,
      noShow: false,
      truckId: null,
      driver: false,
      workStatusNum: null,
      showDialog: false,
      list: [],
      carType: [],
      form: {
        truckTypeId: null,
        licensePlate: ''
      },
      queryParams: {
        page: 1,
        pageSize: 10
      },
      total: null

    }
  },
  async created() {
    // this.getcarTypeList()
    await this.getPapeList()
    this.carTypeData()// 去重
  },
  methods: {
    // 启用 禁用
    operate(row) {
      this.operateId = row.id
      if (row.workStatus === 1) {
        this.noShow = true
      } else {
        this.isShow = true
      }
    },
    // 打开对话框
    showDriver(id) {
      this.driver = true
      this.truckId = id
    },
    // 跳转详情页
    to(id) {
      this.$router.push(`/car/details/${id}`)
    },
    // 获取分页列表
    async getPapeList() {
      const res = await getPagecarList(this.queryParams)
      // console.log(res)
      this.list = res.data.items

      this.total = res.data.counts
    },
    // 模糊查询-去重
    async carTypeData() {
      const res = await getPagecarList({ page: 1, pageSize: 100 })
      const data = res.data.items.map(item => ({ id: item.truckTypeId, name: item.truckTypeName }))

      this.carType = data.filter((obj, index, self) =>
        index === self.findIndex((o) =>
          JSON.stringify(o) === JSON.stringify(obj)
        )
      )
      // console.log(this.carType)
    },
    // 模糊查询
    async getQueryList() {
      const res = await getPagecarList({
        ...this.form,
        ...this.queryParams })

      this.list = res.data.items
      this.total = this.list.length || 0
    },
    // 重置表单
    resetForm() {
      this.getPapeList()
      // this.$refs.form.resetFields()
      this.form.licensePlate = ''
      this.form.truckTypeId = ''
    },
    // 封装导航栏请求
    async  navFn2(num) {
      const res = await getPagecarList({ workStatus: num, ...this.queryParams })
      this.list = res.data.items
      this.total = res.data.counts || 0
    },
    // 封装导航栏请求
    navFn(num) {
      this.queryParams.page = 1
      this.navFn2(num)
    },
    // 根据导航栏 改动数据
    async handleSelect(index) {
      if (index === '2') {
        this.workStatusNum = 1
        this.navFn(this.workStatusNum)
      } else if (index === '3') {
        this.workStatusNum = 0
        this.navFn(this.workStatusNum)
      } else {
        this.workStatusNum = 2
        this.getPapeList()
      }
    },
    // 表格序号
    indexMethod(index) {
      return (this.queryParams.page - 1) * this.queryParams.pageSize + index + 1
    },
    // 切换当前页
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      console.log(val)
      console.log(this.workStatusNum)
      this.workStatusNum === 2 ? this.getPapeList() : this.navFn2(this.workStatusNum)
    },
    // 切换展示条数
    handleCurrentChange(val) {
      this.queryParams.page = val
      this.workStatusNum === 2 ? this.getPapeList() : this.navFn2(this.workStatusNum)
    }
  }

}
</script>

<style lang="scss" scoped>
.box{
  background-color: #f3f4f7;
  padding: 20px;
  .divForm{
    padding: 20px 40px;
    background-color: #fff;
  }
  .divTable{
    margin-top: 20px;
     padding: 30px ;
    background-color: #fff;

  }
  .divTabs{
  // padding: 15px 0;
  margin-top: 20px;

  }
}
.inputW{
  width: 290px;
}
</style>
